
{% assign data = section.settings %}
<div class="block_multicolumn_list {% if data.is_swiper == false %}show_multicolumn_list{%endif%}">
    <div class="container_wrapper">
        <div class="{% if section.settings.is_hr %}show_hr{% endif %}">
            <ul class="multicolumn_list">
                {%- for block in section.blocks -%}
                <li>
                    {% if block.image.src != '' %}
                        <div class="img_box">
    										{% include 'lazy_img',  src:block.image.src,  alt:block.image.alt %}
                        </div>
                    {% endif %}
                    {% if block.title != '' %}
                    <h2 class="item_title">
                        {{block.title}}
                    </h2>
                    {% endif %}
                    {% if block.detail != '' %}
                    <div class="item_detail">
                        {{ block.detail|html_content_filter }}
                    </div>
                    {% endif %}
                </li>
                {%- endfor -%}
            </ul>
        </div>
    </div>
</div>

<div class="block_multicolumn_list_swiper {% if data.is_swiper %}show_multicolumn_list_swiper{%endif%}">
    <div class="container_wrapper">
        <div class="{% if section.settings.is_hr %}show_hr{% endif %}">
            <div class="swiper" id="multicolumn_list_swiper_{{ block_id | default : section.block_id  }}">
                <ul class="multicolumn_list swiper-wrapper">
                    {%- for block in section.blocks -%}
                    <li class="swiper-slide">
                        {% if block.image.src != '' %}
                        <div class="img_box">
							{% include 'lazy_img',src: block.image.src,alt: block.image.alt %}
                        </div>
                        {% endif %}
                        {% if block.title != '' %}
                        <div class="item_title">
                            {{block.title}}
                        </div>
                        {% endif %}
                        {% if block.detail != '' %}
                        <div class="item_detail">
                            {{ block.detail|html_content_filter }}
                        </div>
                        {% endif %}
                    </li>
                    {%- endfor -%}
                </ul>
            </div>

            <div class="swiper_btn_box">

                <div class="btn_wrap">
                    <div class="swiper-button-next-my">
                        <svg viewBox="0 0 10 16" fill="none" role="presentation" class="icon icon-caret-left"
                            aria-hidden="true" focusable="false">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M1.58188 7.76454L0.874768 8.47165L1.58188 9.17876L7.66722 15.2641L8.37433 14.557L2.28898 8.47165L8.37433 2.38631L7.66722 1.6792L1.58188 7.76454Z"
                                fill="currentColor"></path>
                            <path
                                d="M0.874768 8.47165L0.521215 8.1181L0.16766 8.47165L0.521215 8.8252L0.874768 8.47165ZM1.58188 7.76454L1.93543 8.1181L1.93543 8.1181L1.58188 7.76454ZM1.58188 9.17876L1.93543 8.8252L1.93543 8.8252L1.58188 9.17876ZM7.66722 15.2641L7.31367 15.6177L7.66722 15.9712L8.02077 15.6177L7.66722 15.2641ZM8.37433 14.557L8.72788 14.9106L9.08143 14.557L8.72788 14.2034L8.37433 14.557ZM2.28898 8.47165L1.93543 8.1181L1.58188 8.47165L1.93543 8.8252L2.28898 8.47165ZM8.37433 2.38631L8.72788 2.73986L9.08144 2.38631L8.72788 2.03275L8.37433 2.38631ZM7.66722 1.6792L8.02078 1.32565L7.66722 0.972092L7.31367 1.32565L7.66722 1.6792ZM1.22832 8.8252L1.93543 8.1181L1.22832 7.41099L0.521215 8.1181L1.22832 8.8252ZM1.93543 8.8252L1.22832 8.1181L0.521215 8.8252L1.22832 9.53231L1.93543 8.8252ZM8.02077 14.9105L1.93543 8.8252L1.22832 9.53231L7.31367 15.6177L8.02077 14.9105ZM8.02077 14.2034L7.31367 14.9105L8.02077 15.6177L8.72788 14.9106L8.02077 14.2034ZM1.93543 8.8252L8.02077 14.9106L8.72788 14.2034L2.64254 8.1181L1.93543 8.8252ZM8.02078 2.03275L1.93543 8.1181L2.64254 8.8252L8.72788 2.73986L8.02078 2.03275ZM7.31367 2.03275L8.02078 2.73986L8.72788 2.03275L8.02078 1.32565L7.31367 2.03275ZM1.93543 8.1181L8.02078 2.03275L7.31367 1.32565L1.22832 7.41099L1.93543 8.1181Z"
                                fill="currentColor"></path>
                        </svg>

                    </div>
                    <div class="swiper-pagination-my"
                        id="swiper-pagination-my_{{ block_id | default : section.block_id  }}"></div>
                    <div class="swiper-button-prev-my">
                        <svg viewBox="0 0 10 16" fill="none" role="presentation" class="icon icon-caret-right"
                            aria-hidden="true" focusable="false">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M8.30497 9.17881L9.01207 8.47171L8.30497 7.7646L2.21962 1.67926L1.51251 2.38636L7.59786 8.47171L1.51251 14.5571L2.21962 15.2642L8.30497 9.17881Z"
                                fill="currentColor"></path>
                            <path
                                d="M9.01207 8.47171L9.36563 8.82526L9.71918 8.47171L9.36563 8.11815L9.01207 8.47171ZM8.30497 9.17881L7.95141 8.82526V8.82526L8.30497 9.17881ZM8.30497 7.7646L7.95141 8.11816V8.11816L8.30497 7.7646ZM2.21962 1.67926L2.57317 1.3257L2.21962 0.97215L1.86607 1.3257L2.21962 1.67926ZM1.51251 2.38636L1.15896 2.03281L0.805407 2.38636L1.15896 2.73992L1.51251 2.38636ZM7.59786 8.47171L7.95141 8.82526L8.30497 8.47171L7.95141 8.11816L7.59786 8.47171ZM1.51251 14.5571L1.15896 14.2035L0.805405 14.5571L1.15896 14.9106L1.51251 14.5571ZM2.21962 15.2642L1.86607 15.6177L2.21962 15.9713L2.57317 15.6177L2.21962 15.2642ZM8.65852 8.11815L7.95141 8.82526L8.65852 9.53237L9.36563 8.82526L8.65852 8.11815ZM7.95141 8.11816L8.65852 8.82526L9.36563 8.11815L8.65852 7.41105L7.95141 8.11816ZM1.86607 2.03281L7.95141 8.11816L8.65852 7.41105L2.57317 1.3257L1.86607 2.03281ZM1.86607 2.73992L2.57317 2.03281L1.86607 1.3257L1.15896 2.03281L1.86607 2.73992ZM7.95141 8.11816L1.86607 2.03281L1.15896 2.73992L7.24431 8.82526L7.95141 8.11816ZM1.86607 14.9106L7.95141 8.82526L7.24431 8.11816L1.15896 14.2035L1.86607 14.9106ZM2.57317 14.9106L1.86607 14.2035L1.15896 14.9106L1.86607 15.6177L2.57317 14.9106ZM7.95141 8.82526L1.86607 14.9106L2.57317 15.6177L8.65852 9.53237L7.95141 8.82526Z"
                                fill="currentColor"></path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
(function(){(function () {
    let timer = null;
    new Swiper("#multicolumn_list_swiper_{{ block_id | default : section.block_id  }}", {
      navigation: {
        nextEl: ".swiper-button-prev-my",
        prevEl: ".swiper-button-next-my",
      },
      pagination: {
        el: "#swiper-pagination-my_{{ block_id | default : section.block_id  }}",
        type: "fraction",
      },
    });
  })();
  })()
</script>
{% schema %}
{
	"tag": "",
	"class": "block_multicolumn_list",
	"icon": "icon-duotu2",
	"is_global": false,
	"name": {
		"zh_CN": "多列",
		"en_US": "Multiple columns"
	},
	"max_blocks": "20",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "是否显示分割线",
				"en_US": "Show split line"
			},
			"default": true,
			"id": "is_hr"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "是否显示移动端swiper",
				"en_US": "Show mobile swiper"
			},
			"default": true,
			"id": "is_swiper"
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "设置",
				"en_US": "Settings"
			},
			"type": "item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "图片",
						"en_US": "Image"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "建议宽度112px以上，高度自适应",
						"en_US": "Recommended width above 112px, height adaptive"
					},
					"id": "image"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "标题",
						"en_US": "Title"
					},
					"id": "title",
					"default": "Title"
				},
				{
					"type": "card_text_editor",
					"label": {
						"zh_CN": "简短描述",
						"en_US": "Short description"
					},
					"id": "detail",
					"default": ""
				}
			]
		}
	],
	"default": {
		"settings": {
			"is_hr": true,
			"is_swiper": true
		},
		"blocks": [
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"title": "Title",
				"detail": "Detail",
				"block_type": "item"
			},
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"title": "Title",
				"detail": "Detail",
				"block_type": "item"
			},
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"title": "Title",
				"detail": "Detail",
				"block_type": "item"
			},
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"title": "Title",
				"detail": "Detail",
				"block_type": "item"
			}
		]
	}
}
{% endschema %}